<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-ua-compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title></title>
		<style>
			body,input{margin:0;padding:0;}
			input{border:0;}
			.container{
				border:1px solid transparent;
				margin:50px auto;
				width:425px;
				height:415px;
				box-shadow:1px 1px 10px gray;
			}
			.container .list1{
				margin-top:40px;
				height:42px;
			/* 	background-color: pink; */
				font-size:10px;
				text-indent:52px;
			}
			.container .float1,.float2{
				display:none;
				position:relative;
				top:-60px;
				left:182px;
				width:230px;
				height:40px;
				border-radius:90px 0px 0px 12px;
				background-color: gray;
				line-height:40px;
				text-align:left;
				color:#fff;
			}
			.container .list1 .user:hover + .float1{
				display:block;
			}
			.container .list4 .email:hover + .float2{
				display:block;
			}
			.container .list1 .user,.password,.email,.name{
				width:292px;
				height:42px;
				padding-left:10px;
				border:1px solid #ccc;
			/* 	background-color: red; */
				margin-left:10px;
			}
			.container .list2,.list3,.list4,.list5{
				margin-top:20px;
				height:42px;
				/* background-color: pink; */
				font-size:10px;
				text-indent:26px;
			}
			.container .list4{
				text-indent:45px;
			}
			.container  .register,.sign-in{
				position:relative;
				top:15px;
				left:85px;
				border:1px solid transparent;
				border-radius:8px 8px 8px 8px;
				width:80px;
				height:30px;
				background-color: blue;
				color:#fff;
			}
			.container .sign-in{
				width:150px;
				margin-left:20px;
			}
		</style>
	</head>
	<body>
		<div class='container'>
			<div class="list1">
				user<input class='user' name='txt' type="text" placeholder='请输入账号'>
				<div class="float1">
					<p>用户名必须是英文</p>
				</div>
			</div>
			<div class="list2">
				password<input class='password' name='txt' type="password" placeholder='密码'>
			</div>
			<div class="list3">
				password<input class='password' name='txt' type="password" placeholder='再次输入密码'>
			</div>
			<div class="list4">
				email<input class='email' type="text" name='txt' placeholder='输入你的邮箱' >
				<div class="float2">
					<p>邮箱名字必须符合规则有效</p>
				</div>
			</div>
			<div class="list5">
				nickname<input class='name' type="text" name='txt' placeholder='昵称'>
			</div>
			<input class='register'type="button" name='button' value='注册'>
			<input class='sign-in'type="button" name='button' value='我有账号，我要登录'>
		</div>
	</body>
</html>
